<!--
 * @Author: your name
 * @Date: 2021-10-19 18:03:17
 * @LastEditTime: 2021-10-22 18:14:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Vuec:\Users\86131\Desktop\project\payforknowledge\src\views\grabble.vue
-->
<template>
  <div class="app">
    <van-search
      v-model="value"
      show-action
      shape="round"
      placeholder="科学哲学"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch" class="r-icon">
          <img
            src="../assets/img/play-img/liebiao.png"
            alt=""
            @click="onClicklb"
          />
        </div>
      </template>
      <template #right-icon>
        <div @click="onSearch">
          <img src="../assets/img/play-img/sousuo.png" alt="" />
        </div>
      </template>
    </van-search>

    <p class="title">历史搜索</p>
    <div class="lishi">
      <div>数字化转型</div>
      <div>焦虑情绪管理课</div>
      <div>经济学</div>
      <div>北大金融学</div>
    </div>
    <p class="shanchu">删除</p>

    <div class="rebang">
      <van-tabs :active="active">
        <van-tab title="热搜">
          <ul>
            <li>1. 《王立铭 · 进化论50讲》</li>
            <li>2. 《沈祖云 · 组织变革20讲》</li>
            <li>3. 《李超 · 泌尿医学科》</li>
            <li>4. 《刘琪 · 人类29讲》</li>
            <li>5. 《跟华杉学儒家思想》</li>
            <li>6. 《张江 · 复杂科学前沿》</li>
            <p class="more">更多</p>
          </ul>
        </van-tab>
        <van-tab title="课程">
          <ul>
            <li>1. 《王立铭 · 进化论50讲》</li>
            <li>2. 《沈祖云 · 组织变革20讲》</li>
            <li>3. 《李超 · 泌尿医学科》</li>
            <li>4. 《刘琪 · 人类29讲》</li>
            <li>5. 《跟华杉学儒家思想》</li>
            <li>6. 《张江 · 复杂科学前沿》</li>
            <p class="more">更多</p>
          </ul>
        </van-tab>
        <van-tab title="听书">
          <ul>
            <li>1. 《王立铭 · 进化论50讲》</li>
            <li>2. 《沈祖云 · 组织变革20讲》</li>
            <li>3. 《李超 · 泌尿医学科》</li>
            <li>4. 《刘琪 · 人类29讲》</li>
            <li>5. 《跟华杉学儒家思想》</li>
            <li>6. 《张江 · 复杂科学前沿》</li>
            <p class="more">更多</p>
          </ul>
        </van-tab>
        <van-tab title="电子书">
          <ul>
            <li>1. 《王立铭 · 进化论50讲》</li>
            <li>2. 《沈祖云 · 组织变革20讲》</li>
            <li>3. 《李超 · 泌尿医学科》</li>
            <li>4. 《刘琪 · 人类29讲》</li>
            <li>5. 《跟华杉学儒家思想》</li>
            <li>6. 《张江 · 复杂科学前沿》</li>
            <p class="more">更多</p>
          </ul>
        </van-tab>
        <van-tab title="热推榜">
          <ul>
            <li>1. 《王立铭 · 进化论50讲》</li>
            <li>2. 《沈祖云 · 组织变革20讲》</li>
            <li>3. 《李超 · 泌尿医学科》</li>
            <li>4. 《刘琪 · 人类29讲》</li>
            <li>5. 《跟华杉学儒家思想》</li>
            <li>6. 《张江 · 复杂科学前沿》</li>
            <p class="more">更多</p>
          </ul>
        </van-tab>
      </van-tabs>
    </div>

    <div></div>
  </div>
</template>

<script>
import { Search } from "vant";
import { ref } from "vue";
import { Tab, Tabs } from "vant";
import { useRouter } from "vue-router";
export default {
  setup() {
    const value = ref("");
    const active = ref(2);
    const router = useRouter();
    const onClicklb = () => {
      router.go(-1);
    };
    return {
      value,
      active,
      onClicklb,
    };
  },

  components: {
    VanSearch: Search,
    VanTabs: Tabs,
    VanTab: Tab,
  },

  computed: {},

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.app {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}

/deep/ .van-search {
  display: flex;
  align-items: center;
}
/deep/.van-search__content {
  background-color: #ededed;
}
/deep/ .van-field__right-icon {
  margin-right: 2px;
  height: 18px;
  img {
    width: 15px;
    height: 15px;
  }
}
/deep/ .van-search__action {
  .r-icon {
    height: 26px;
  }
}

/deep/i::before {
  display: none;
}
.title {
  font-size: 17px;
  font-weight: bold;
  padding: 15px 15px 0px 15px;
}
.lishi {
  font-size: 13px;
  color: #909090;
  display: flex;
  width: 300px;
  height: 80px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
  margin-left: 10px;
  margin-top: 10px;
  div {
    padding: 0px 15px;
    height: 30px;
    background-color: #e9e9e9;
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
  }
}
.shanchu {
  width: 100px;
  height: 30px;
  font-size: 12px;
  color: #909090;
  position: absolute;
  right: -63px;
  top: 113px;
}
.rebang {
  font-size: 14px;
  ul {
    display: flex;
    margin-left: 6px;
    flex-direction: column;
    li {
      padding: 5px;
      color: #323232;
    }
  }
}
/deep/.van-tabs__line {
  display: none;
}
/deep/.van-tabs__nav {
  width: 80%;
}
/deep/.van-tab--active {
  font-size: 16px;
  font-weight: bold;
}
.more {
  position: absolute;
  font-size: 12px;
  top: 180px;
  right: 15px;
  color: #909090;
}
</style>
